@if $use-tables == true {
  //------------------------------------
  //  TABLES
  //------------------------------------
  table {
    &.table {
      empty-cells: show;
      width: 100%;
      
      caption {
        color: #000;
        font: italic 85%/1 arial, sans-serif;
        padding: 1em 0;
        text-align: center;
      }
      
      thead { border-bottom: 2px solid #ededed; }
      
      th { padding: 12px 15px; }
      
      td {
        padding: 12px 15px;
        border-top: 1px solid #ededed;
      }
    }
    

    @if $use-table-styles == true {
      // Background colors
      .bg-light-green { color: $color-green; }
      
      .bg-light-blue { color: $color-blue; }
      
      .bg-light-yellow { color: $color-yellow; }
      
      .bg-light-red { color: $color-red; }
      
      
      // Full-width table
      &.table-full,
      &.table.table-full { width: 100%; }
      
      
      // Borders
      &.table-border-all, &.table-border-outer { border: 1px solid #ededed; }
      
      &.table-border-all {
        th, 
        td { border-right: 1px solid #ededed; }
      }
      
      &.table-border-inner {
        th, 
        td { border-right: 1px solid #ededed; }
      }
      
      
      // Hovers
      &.table-hover-row tr:hover td, 
      &.table-hover-cell td:hover { background-color: #f9f9f9; }
      
      
      // Striped
      &.table-fill-even tbody tr:nth-child(even), 
      &.table-fill-odd tbody tr:nth-child(odd) { background-color: #f9f9f9; }
    }
  }

  @include breakpoint(extra-small) {
    table.table {
      width: auto;
      
      th, td { padding: 10px 50px 10px 25px; }
    }
  }


  // Responsive tables
  .table-responsive {
    overflow: auto;
    width: 100%;
    
    table { margin-bottom: 0; }
  }
}